<template>
  <div>
    <el-button type='primary' @click='start'>start</el-button>
    <div id='map'></div>

    <div id='chart'></div>
  </div>

</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'


export default {
  data() {
    return {
      map: null,
      auto: null,
      placeSearch: null
    }
  },
  created() {
    let k = new Date()
    //console.log(this.$dayjs(k).format('YYYY-MM-DD'))
    console.log(this.$dayjs(new Date().getFullYear() + '-' + new Date().getMonth() + '-' + new Date().getDate() + ' 00:00:00'))

    console.log(this.$dayjs().format('YYYY-MM-DD HH:mm:ss'))
    console.log(this.$dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'))

    let d = new Date()
    console.log(this.$dayjs(d).format('YYYY/MM/DD HH:mm:ss'))
    console.log(Number(this.$dayjs('20230211202530').valueOf() ) / 1000)


  },
  methods: {
    start() {
      this.initMap()
      this.showEcharts()
    },
    // 初始化地图
    initMap() {
      AMapLoader.load({
        key: '8bfbfbb89775708dea049f9529649b8c', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.DragRoute']
      }).then((AMap) => {
        console.log('AMap:', AMap)
        AMap.Map('map', {
          viewMode: '2D', //  是否为3D模式
          zoom: 13, // 地图级别
          center: [114.268691, 30.401227], // 坐标
          resizeEnable: true
        })
      }).catch((e) => {
        console.log(e)
      })
    },
    // 加载图表
    showEcharts() {

      let myChart = this.$echarts.init(document.getElementById('chart'))

      let option = {

        tooltip: {
          show: true,
          trigger: 'axis', // item/axis/none
          formatter: function(data) {
            //  console.log(data)
            let str = data[0].name + '<br/>'
            data.forEach(item => {
              str += `${item.marker}${item.seriesName}: ${item.data} <br/> `
            })
            return str
          },
          axisPointer: { type: 'none' }
        },
        throttle: 100, // 刷新
        legend: {
          data: ['ta', 'te']
        },

        calculable: true,
        xAxis: [
          {
            axisLabel: {
              // rotate: 30,
              interval: 0
            },
            axisLine: {
              lineStyle: {
                color: '#CECECE'
              }
            },
            type: 'category',
            boundaryGap: false,
            data: function() {
              let list = []
              for (let i = 10; i <= 18; i++) {
                if (i <= 12) {
                  list.push('2016-' + i + '-01')
                } else {
                  list.push('2017-' + (i - 12) + '-01')
                }
              }
              return list
            }(),
            splitLine: {
              lineStyle: {
                type: 'dashed'
              },
              show: true
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#CECECE'
              }
            },
            splitLine: {
              lineStyle: {
                type: 'dashed'
              },
              show: false
            },
            axisLabel: {
              formatter: function(value) {

                let texts = []
                if (value === 0 || value === '0') {
                  texts.push('Ⅰ类')
                } else if (value === 200 || value === '200') {
                  texts.push('Ⅱ类')
                } else if (value === 400 || value === '400') {
                  texts.push('Ⅲ类')
                } else if (value === 600 || value === '600') {
                  texts.push('Ⅳ类')
                } else if (value === 800 || value === '800') {
                  texts.push('V类')
                }
                return texts

              }
            }
          }
        ],
        series: [
          {
            name: '充值',
            type: 'line',
            symbol: 'none',
            smooth: 0.2,
            color: ['#66AEDE'],
            data: [800, 300, 500, 800, 300, 600, 500, 600]
          },
          {
            name: '消费',
            type: 'line',
            symbol: 'none',
            smooth: 0.2,
            color: ['#90EC7D'],
            data: [600, 300, 400, 200, 300, 300, 200, 400]
          }
        ]
      }
      myChart.setOption(option)
    }

  }
}
</script>

<style scoped>

.el-button {
  margin-bottom: 20px;
}

#map {
  overflow: hidden;
  width: 100%;
  height: 280px;
  margin: 0 auto;
}

#chart {
  width: 100%;
  height: 460px;
  margin: 0 auto
}


</style>